<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>省市级联</title>
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	</head>

	<body>
		<select id="province">
			<option>--请选择省份--</option>
			<option value="0">北京</option>
			<option value="1">浙江省</option>
			<option value="2">河北省</option>
			<option value="3">广东省</option>
		</select>
		<select id="city"> </select>
	</body>

</html>
<script>
	$(function() { 
		//创建二维数组存储省份和对应的城市
		var cityList = new Array();
		cityList[0] = new Array("朝阳区", "海淀区", "东城区", "西城区");
		cityList[1] = new Array("杭州市", "嘉兴市", "宁波市", "绍兴市");
		cityList[2] = new Array("石家庄市", "唐山市", "承德市", "张家口市");
		cityList[3] = new Array("广州市", "惠州市", "深圳市", "茂名市");
		$("#province").change(function() { 
			//获取到城市的下拉列表框 
			var city=$("#city"); 
			//先去清空原有的列表内容 
 			city.html(""); 
 			var arr=cityList[$(this).val()]; 
 			var str=""; 
 			for(var i=0;i<arr.length;i++){ 
 				str+='<option value=' +arr[i]+ '>'+arr[i]+ '</option>'; 
 			}
 			city.html(str); 
		}); 
	});
</script>